
<template>
  <div v-loading="loading">
    <div class="searchBox">
      <el-form :inline="true" :model="QueryForm" size="small">
        <el-form-item label="用户名/昵称">
          <el-input
            clearable
            v-model="QueryForm.Keyword"
            placeholder="请输入用户名或昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="QueryForm.isActive"
            clearable
            placeholder="请选择"
          >
            <el-option label="启用" value="true"></el-option>
            <el-option label="禁用" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadList">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button native-type="reset" type="danger" @click="resetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="editButtons">
      <el-button-group>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-star-on"
          @click="addClick"
          >新增</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-edit"
          @click="editClick"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-delete"
          @click="removeClick"
          >删除</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-view"
          @click="viewClick"
          >查看</el-button
        >
      </el-button-group>
    </div>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%"
      @row-dblclick="dubboClickRow"
      @current-change="selectRow"
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
      ></el-table-column>
      <el-table-column
        v-for="column in columns"
        :key="column.id"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align"
        :formatter="formatter"
        :sortable="column.sortable"
      >
      </el-table-column>
    </el-table>
    <div class="pageNation">
      <el-pagination
        background
        @size-change="limitChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="EditFormDialog">
      <el-dialog :title="EditFormDialogTitle" v-model="EditFormVisible">
        <el-form
          :inline="true"
          :model="CreateForm"
          size="small"
          label-width="80px"
        >
          <el-form-item label="用户名">
            <el-input
              clearable
              v-model="CreateForm.userName"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓氏">
            <el-input
              clearable
              v-model="CreateForm.surname"
              placeholder="请输入用姓氏"
            ></el-input>
          </el-form-item>
          <el-form-item label="名字">
            <el-input
              clearable
              v-model="CreateForm.name"
              placeholder="请输入名"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              clearable
              v-model="CreateForm.emailAddress"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input
              clearable
              v-model="CreateForm.phoneNumber"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" v-if="isAdd">
            <el-input
              clearable
              v-model="CreateForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select
              v-model="CreateForm.roleNames"
              multiple
              clearable
              placeholder="请选择"
            >
              <el-option label="管理员" value="Admin"></el-option>
              <el-option label="管理员" value="管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户状态">
            <el-switch v-model="CreateForm.isActive"></el-switch>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="EditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateSubmit">确 定</el-button>
        </template>
      </el-dialog>
    </div>
    <div class="ViewFormDialog"></div>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      // 加载动画
      loading: false,
      // 新增修改Form弹窗
      EditFormVisible: false,
      // 新增修改Form弹窗Title
      EditFormDialogTitle: "",
      // 新增或修改动作
      isAdd: null,
      // 当前选中Id
      currentId: null,
      // 新增修改
      CreateForm: {
        userName: "",
        name: "",
        surname: "",
        emailAddress: "",
        isActive: true,
        roleNames: [],
        phoneNumber: "",
        password: "",
      },
      //查询
      QueryForm: {
        Keyword: "",
        isActive: null,
      },
      // 分页相关
      total: 10,
      limit: 10,
      currentPage: 1,
      pageSizes: [10, 20, 50, 100],
      //列表数据
      tableData: [],
      // 列表列
      columns: [
        { label: "姓名", prop: "fullName" },
        { label: "手机", prop: "phoneNumber" },
        { label: "邮箱", prop: "emailAddress" },
        { label: "创建日期", prop: "creationTime", sortable: true },
      ],
    };
  },
  methods: {
    // 请求查询List
    loadList() {
      let that = this;
      that.loading = true;
      that.$api.user
        .getAll({
          Keyword: that.QueryForm.Keyword,
          SkipCount: (that.currentPage - 1) * that.limit,
          MaxResultCount: that.limit,
          isActive: that.QueryForm.isActive,
        })
        .then((response) => {
          that.loading = false;
          if (response.result) {
            that.tableData = response.result.items;
            that.total = response.result.totalCount;
          }
        })
        .catch((error) => {
          that.loading = false;
          console.log(error);
        });
      that.loading = false;
      that.currentId = null;
    },
    // 查询用户信息
    getUserInfo(id) {
      let that = this;
      that.loading = true;
      that.$api.user
        .Get({ id })
        .then((response) => {
          that.loading = false;
          if (response.result) {
            that.CopyValueFromObj(response.result, that.CreateForm);
          }
        })
        .catch((error) => {
          that.loading = false;
          console.log(error.message);
        });
    },
    // 列格式化
    formatter(row, column, cellValue) {
      let prop = column.property;
      if (prop == "creationTime") {
        return cellValue;
      }
      return cellValue;
    },
    // 调整页容量
    limitChange(val) {
      this.limit = val;
      this.loadList();
    },
    // 翻页
    pageChange(val) {
      this.currentPage = val;
      this.loadList();
    },
    // 新增或更新请求
    addOrUpdateSubmit() {
      let that = this;
      that.loading = true;
      //更新
      if (that.isAdd) {
        that.$api.user
          .Create(that.CreateForm)
          .then((response) => {
            if (response.result) {
              this.loadList();
            }
            that.loading = false;
          })
          .catch((error) => {
            that.loading = false;
            console.log(error.message);
          });
      }
      //新增
      else {
        that.$api.user
          .Update(that.CreateForm)
          .then((response) => {
            if (response.result) {
              this.loadList();
            }
            that.loading = false;
          })
          .catch((error) => {
            that.loading = false;
            console.log(error.message);
          });
      }

      that.EditFormVisible = false;
    },
    // 双击查看详情
    dubboClickRow(row) {
      this.ClearValueFromObj();
      this.EditFormVisible = true;
      this.CopyValueFromObj(row, this.CreateForm);
    },
    selectRow(currentRow) {
      if (currentRow) this.currentId = currentRow["id"];
    },
    addClick() {
      this.EditFormVisible = true;
      this.ClearValueFromObj(this.CreateForm);
      this.EditFormDialogTitle = "新增";
      this.isAdd = true;
    },
    editClick() {
      this.isAdd = false;
      let id = this.currentId;
      if (id) {
        // id
        this.CreateForm.id = id;
        this.ClearValueFromObj(this.CreateForm);
        this.getUserInfo(id);
        this.EditFormDialogTitle = "编辑";
        this.EditFormVisible = true;
      } else {
        ElMessage.warning({
          message: "请选择要编辑的行",
          type: "warning",
        });
      }
    },
    removeClick() {
      let that = this;
      let id = that.currentId;
      if (id) {
        that.loading = true;
        that
          .$confirm("删除用户后将无法登录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            that.$api.user
              .Delete({ id })
              .then(() => {
                this.loadList();
                that.loading = false;
              })
              .catch((error) => {
                that.loading = false;
                console.log(error.message);
              });
          })
          .catch(() => {
            that.loading = false;
            console.log("取消删除");
          });
      } else {
        ElMessage.warning({
          message: "请选择要删除的行",
          type: "warning",
        });
      }
    },
    viewClick() {
      let id = this.currentId;
      if (id) {
        this.ClearValueFromObj(this.CreateForm);
        this.getUserInfo(id);
        this.EditFormDialogTitle = "查看";
        this.EditFormVisible = true;
      } else {
        ElMessage.warning({
          message: "请选择要查看的行",
          type: "warning",
        });
      }
    },
    resetForm() {
      this.ClearValueFromObj(this.QueryForm);
    },
    CopyValueFromObj(source, target) {
      for (let property in target) {
        let sourceVal = source[property];
        if (sourceVal != undefined) {
          target[property] = source[property];
        }
      }
    },
    ClearValueFromObj(obj) {
      for (let property in obj) {
        obj[property] = null;
      }
    },
  },
  created() {
    this.loadList();
  },
};
</script>

<style>
.el-table th,
.el-table td {
  height: 40px;
  line-height: 40px;
  padding: 0 !important;
  font-size: 12px;
}

table thead {
  background-color: cornflowerblue;
}

.editButtons {
  margin: 10px 0;
}

.pageNation {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
</style>
